<template>
	<view class="content">
		<!-- <view class="wrap" style="background: rgb(229,238,217);">
			<view>名称</view>
			<view>管径(mm)</view>
			<view>设计规模(万m³/d)</view>
			<view>实时流量(m³/h)</view>
			<view>累计流量(m³)</view>
			<view>调节阀开度(%)</view>
			<view>阀前压力(MPa)</view>
		</view> -->
		<scroll-view scroll-y class="scroll" style="word-break:break-all;text-align: center;">
            <view style="display: flex;">
                <view style="width:30vw;">
                    <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 80rpx;">名称</view>
                    <view class="name" :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">{{item.name}}</view>
                </view>
                <scroll-view scroll-x enable-back-to-top show-scrollbar="false" 
                style="flex-direction: row;width: 70vw;white-space: nowrap;word-break:break-all;">
                    <view style="display: inline-block;width: 23.33vw;">
                        <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">管径<br/>(mm)</view>
                        <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                        	{{item.gj}}
                        </view>
                    </view>
                    <view style="display: inline-block;width: 23.33vw;">
                        <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">设计规模<br/>(万m³/d)</view>
                        <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                        	{{parseFloat(item.sjgm)}}
                        </view>
                    </view>
                    <view style="display: inline-block;width: 23.33vw;">
                        <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">实时流量<br/>(m³/h)</view>
                        <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                        	{{item.ss}}
                        </view>
                    </view>
                    <view style="display: inline-block;width: 23.33vw;">
                        <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">累计流量<br/>(m³)</view>
                        <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                        	{{item.lj}}
                        </view>
                    </view>
                   <view style="display: inline-block;width: 23.33vw;">
                       <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">调节阀开度<br/>(%)</view>
                       <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                       	{{item.tjf}}
                       </view>
                   </view>
                   <view style="display: inline-block;width: 23.33vw;">
                       <view style="background: rgb(229,238,217);font-size: 24rpx;line-height: 30rpx;padding: 12rpx 0;">电动阀阀前压力<br/>(MPa)</view>
                       <view :style="{fontSize: '28rpx',backgroundColor:index%2==1?'#FAFAFA':'white',lineHeight:'80rpx'}"  v-for="item,index in data">
                       	{{item.yali}}
                       </view>
                   </view>
                                      
                </scroll-view>
            </view>
            
            
			<!-- <view class="wrap"  v-for="item,index in data" :style="{borderWidth:'0rpx',backgroundColor:index%2==1?'#FAFAFA':'white'}">
				<view>{{item.name}}</view>
				<view>{{item.gj}}</view>
				<view>{{parseFloat(item.sjgm)}}</view>
				<view>{{item.ss}}</view>
				<view>{{item.lj}}</view>
				<view>{{item.tjf}}</view>
				<view>{{item.yali}}</view>
			</view>
			<view style="height: 100rpx;border-width: 0rpx;"/> -->
		</scroll-view>
        <view style="display: flex;flex-wrap: wrap;">
           <view style="width: 50vw;" v-if="qslist.length">
                <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
                							  <view class="qiun-title-dot-light">取水口一干线流量（m³/h）</view>
                </view>
                <view  style="color: #969799;padding-left: 28rpx;font-size: 26rpx;line-height: 40rpx;">{{qslist[0].timestamp}}</view>
                <view class="value" style="line-height: 70rpx;">{{tickThree()}}</view>
            </view>
            <view style="width: 50vw;" v-if="qslist.length">
                <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
                							  <view class="qiun-title-dot-light">取水口二干线流量（m³/h）</view>
                </view>
                <view  style="color: #969799;padding-left: 28rpx;font-size: 26rpx;line-height: 40rpx;">{{qslist[1].timestamp}}</view>
                <view class="value" style="line-height: 70rpx;">{{tickFour()}}</view>
            </view>
            <view style="width: 50vw;" v-if="qslist.length">
                <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
                							  <view class="qiun-title-dot-light">取水口流量合计（m³/h）</view>
                </view>
                <view class="value">{{tickTwo()}}</view>
            </view>
           <view style="width: 50vw;" v-if="data.length">
                <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
                							  <view class="qiun-title-dot-light">分水口流量合计（m³/h）</view>
                </view>
                <view class="value">{{tickOne()}}</view>
            </view>
			<view style="width: 50vw;">
			     <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			     							  <view class="qiun-title-dot-light">总累计流量（m³）</view>
			     </view>
			     <view class="value">{{zongleijiliuliang||0}}</view>
			 </view>
        </view>
		</view>
	</view>
</template>

<script>
import API from "@/common/api.js";
import flipcountdown from "@/components/flipcountdown-uni/flipcountdown-uni.vue";
var _self = null;
export default {
  components: {
    flipcountdown,
  },
  data() {
    return {
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      data: [],
      timer: null,
      ss: 0,
      lj: 0,
	  zongleijiliuliang:0,
      tickOne: function tick() {
        return (this.propsDataOrNum = _self.ss
          ? Number(_self.ss).toFixed(2)
          : 0);
      },
      qs: 0,
      tickTwo: function tick() {
        return (this.propsDataOrNum = _self.qs
          ? Number(_self.qs).toFixed(2)
          : 0);
      },
      qslist: [],
      tickThree: function tick() {
        if (_self.qslist) {
          return (this.propsDataOrNum = _self.qslist[0].value
            ? Number(_self.qslist[0].value).toFixed(2)
            : 0);
        }
      },
      tickFour: function tick() {
        if (_self.qslist) {
          return (this.propsDataOrNum = _self.qslist[1].value
            ? Number(_self.qslist[1].value).toFixed(2)
            : 0);
        }
      },
    };
  },
  onLoad(options) {
    _self = this;
    this.socket();
  },
  onUnload() {
    clearInterval(this.timer);
    uni.closeSocket();
    uni.hideLoading();
  },
  methods: {
    socket() {
      uni.showLoading();
      uni.connectSocket({
        url:
          "wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization=" +
          this.pzhAuthorization,
      });
      uni.onSocketOpen((res) => {
        console.log("WebSocket连接已打开！");
        uni.sendSocketMessage({ data: "getFSKTargetValues(1)" });
        uni.sendSocketMessage({ data: "getTargetValuesByType(实时取水量)" });
        this.timer = setInterval(() => {
          uni.sendSocketMessage({ data: "getFSKTargetValues(1)" });
          uni.sendSocketMessage({ data: "getTargetValuesByType(实时取水量)" });
        }, 5000);
      });

      uni.onSocketMessage((res) => {
        uni.hideLoading();

        let obj = JSON.parse(res.data);
        console.log(obj);
        if (obj.functionCode == "getTargetValuesByType") {
          this.qs = 0;
          this.qslist = obj.datas;
          obj.datas.forEach((item, index) => {
            this.qs += parseFloat(this.changeNum(item.value));
          });
        } else if (obj.functionCode == "getFSKTargetValues") {
          this.data = [];
          this.ss = 0;
		  this.zongleijiliuliang=0
          obj.datas.forEach((item, index) => {
            if (index % 4 == 0) {
              let data = {
                sjgm: item.sjgm,
                gj: item.gj,
                name: item.sbmc.substring(
                  item.sbmc.indexOf("#") + 1,
                  item.sbmc.length
                ),
                lj: this.changeNum(item.value),
                ss: this.changeNum(obj.datas[index + 1].value),
                tjf: this.changeNum(obj.datas[index + 2].value),
                yali: this.changeNum2(obj.datas[index + 3].value),
              };
              this.data.push(data);
			  this.zongleijiliuliang+=Number(data.lj||0)
              this.ss += parseFloat(data.ss);
            }
          });
        }
        this.$forceUpdate();
      });
    },
    changeNum(num) {
      return Number(Math.floor(Number(num) * 100) / 100).toFixed(2);
    },
    changeNum2(num) {
      return Number(Math.floor(Number(num) * 1000) / 1000).toFixed(3);
    },
  },
};
</script>
<style scoped>
/* #ifndef H5 */
.content >>> .xdsoft_flipcountdown > .xdsoft_digit {
  transition-property: background-position;
  transition-duration: 0.5s;
}
/* #endif */
</style>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
body {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
text {
  font-size: 30rpx;
  line-height: 2em;
  color: #333;
}

page {
  background: #fff;
}

button {
  width: 100%;
}
/* #endif */
.content {
  background: white;
  .wrap {
    display: flex;
    text-align: center;
    border-top: 2rpx solid #dcdfe6;
    border-bottom: 2rpx solid #dcdfe6;
    flex-wrap: wrap;
    view {
      font-size: 26rpx;
      padding: 10rpx 0;
      width: 25vw;
      display: flex;
      line-height: 40rpx;
      flex-direction: column;
      justify-content: center;
    }
  }
  .scroll {
    height: calc(100vh - 540rpx);
    view {
      color: #777777;
      border-bottom: 2rpx solid #dcdfe6;
    }
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .qiun-common-mt {
    margin-top: 10upx;
  }
  .qiun-bg-white {
    background: #ffffff;
  }
  .qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
  }
  .qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 26rpx;
    color: #000000;
  }
  .value {
    padding-left: 20rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    font-weight: bold;
    color: rgba(74, 125, 221, 1);
  }
}
</style>
